{% assign data = section.settings %}
{%- capture fill_container -%}
  {%- if data.is_width_fill -%}
    container_fill
  {%- else -%}
    container_wrapper
  {%- endif -%}
{%- endcapture -%}

{%- capture img_crop -%}
  {%- if data.height != 'auto' -%}
    data-crop-type="height"
  {%- endif -%}
{%- endcapture -%}

{% assign blockId = block_id | default: section.block_id %}

<div class="block_slides {% if data.open_anime %}slideshow_anime{% endif %}">
  <div class="{{fill_container}}">
    <div class="swiper relative overflow-hidden" id="swiper-{{blockId}}">
      <ul class="swiper-wrapper">
        {% for block in section.blocks %}
          <li class="swiper-slide relative">
            {% if block.btn_text == '' %}
              <a href="{{block.link | setUrlDataFrom:data_from}}" class="absolute w-full h-full z-[200] left-0 top-0"></a>
            {% endif %}
            <div class="img_box relative img-{{data.height}}" style="--mask-color: {{block.mask_color}};">
              <div class="pc_img md:block hidden h-full">
                {% include 'lazy_img', src: block.pc_image.src, alt: block.pc_image.alt, class: 'w-full object-cover', attr: img_crop, file_type: 'banner' %}
              </div>
              <div class="mobile_img md:hidden block h-full">
				{% if block.mobile_image.src == '' %}
					{% include 'lazy_img', src: block.pc_image.src, alt: block.pc_image.alt, class: 'w-full object-cover', attr: img_crop, file_type: 'banner' %}
				{% else %}
					{% include 'lazy_img', src: block.mobile_image.src, alt: block.mobile_image.alt, class: 'w-full object-cover', attr: img_crop, file_type: 'banner' %}
				{% endif %}
              </div>
            </div>
            <div class="text_box absolute left-0 top-0 w-full h-full" style='--text-color: {{block.text_color}}'>
              <div class="container_wrapper h-full flex {{block.position_algin}}">
                <div class="content py-5 md:max-w-[50%]">
                  {% if block.title != '' %}
                    <h2 class="slide-title mb-4 title_family" style="--size: {{block.title_size}}px;">{{block.title}}</h2>
                  {% endif %}
                  {% if block.detail != '' %}
                    <div class="slide-detail font-size-body-large mb-7">{{block.detail}}</div>
                  {% endif %}
                  {% if block.btn_text != '' %}
                    <div class="btn_wrap" style="--btn-color: {{block.btn_color}};--btn-bg: {{block.btn_bg}};">
                      <a class="public_btn" href="{{block.link | setUrlDataFrom:data_from}}">{{block.btn_text}}</a>
                    </div>
                  {% endif %}
                </div>
              </div>
            </div>
          </li>
        {% endfor %}
      </ul>
      <div class="swiper-pagination" id="swiper-pagination-{{blockId}}"></div>
    </div>
  </div>
</div>

<script>
  $(function() {
    const sildesSwiper = new Swiper('#swiper-{{blockId}}', {
      {% if data.open_anime %}
        effect: 'fade',
      {% endif %}
    {% if section.blocks.size >1  %}
        loop : true,
      {% endif %}
      watchOverflow: true,
      autoplay:{% if section.settings.is_play and section.blocks.size >1  %}{
          delay: Number('{{section.settings.duration}}') * 1000
        }
      {% else %}
        false
      {% endif %},
      {% if section.blocks.size >1  %}
        pagination : {
          el: '#swiper-pagination-{{blockId}}',
          clickable: true
        }
      {% endif %}
    })
    var block = {{section.blocks|pubic_front_imgcdn_replace|json}};
    if(block.length){
      moi.addEvent('lazyImg', function(event) {
          if (event.params && block.findIndex(item => {
            return item.pc_image.src == event.params || item['mobile_image'].src == event.params
          }) > -1) {
            sildesSwiper.updateAutoHeight()
          }
      })
    }
  })
</script>

{% schema %}
{
	"tag": "",
	"class": "block_slides",
	"is_global": false,
	"name": {
		"zh_CN": "轮播图",
		"en_US": "carousel image"
	},
	"max_blocks": 10,
	"blocks": [
		{
			"name": {
				"zh_CN": "轮播图片",
				"en_US": "Carousel pictures"
			},
			"type": "slide-item",
			"settings": [
				{
					"type": "card_image",
					"label": {
						"zh_CN": "pc端图片",
						"en_US": "PC side pictures"
					},
					"default": {
						"src": "",
						"alt": ""
					},
					"info": {
						"zh_CN": "尺寸建议：大-1920*800px，中-1920*600，小-1920*420",
						"en_US": "Size recommendations: Large-1920*800px, Medium-1920*600, Small-1920*420"
					},
					"id": "pc_image"
				},
				{
					"type": "card_image",
					"label": {
						"zh_CN": "移动端图片",
						"en_US": "Mobile pictures"
					},
					"default": {
						"src": "",
						"alt": ""
					},
					"info": {
						"zh_CN": "尺寸建议1242*2000px",
						"en_US": "The recommended size is 1242*2000px"
					},
					"id": "mobile_image"
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "标题",
						"en_US": "Title"
					},
					"id": "title",
					"default": "Slideshow"
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "描述",
						"en_US": "describe"
					},
					"id": "detail",
					"default": "Use this section to make a bold statement"
				},
				{
					"type": "card_slider",
					"label": {
						"zh_CN": "标题字号",
						"en_US": "title font size"
					},
					"id": "title_size",
					"max": 72,
					"min": 48,
					"unit": "px",
					"default": 64
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "按钮文字",
						"en_US": "button text"
					},
					"id": "btn_text",
					"default": "Learn more"
				},
				{
					"type": "card_page_link",
					"label": {
						"zh_CN": "跳转链接",
						"en_US": "Jump link"
					},
					"default": {
						"type": "",
						"title": "",
						"url": ""
					},
					"id": "link"
				},
				{
					"type": "card_select",
					"label": {
						"zh_CN": "文本位置",
						"en_US": "text position"
					},
					"default": "center",
					"id": "position_algin",
					"option": [
						{
							"label": {
								"zh_CN": "上左",
								"en_US": "upper left"
							},
							"value": "top-left"
						},
						{
							"label": {
								"zh_CN": "上中",
								"en_US": "On the"
							},
							"value": "top-center"
						},
						{
							"label": {
								"zh_CN": "上右",
								"en_US": "up right"
							},
							"value": "top-right"
						},
						{
							"label": {
								"zh_CN": "中左",
								"en_US": "center left"
							},
							"value": "center-left"
						},
						{
							"label": {
								"zh_CN": "中中",
								"en_US": "中中"
							},
							"value": "center-center"
						},
						{
							"label": {
								"zh_CN": "中右",
								"en_US": "center right"
							},
							"value": "center-right"
						},
						{
							"label": {
								"zh_CN": "下左",
								"en_US": "lower left"
							},
							"value": "bottom-left"
						},
						{
							"label": {
								"zh_CN": "下中",
								"en_US": "Xiaozhong"
							},
							"value": "bottom-center"
						},
						{
							"label": {
								"zh_CN": "下右",
								"en_US": "Downright"
							},
							"value": "bottom-right"
						}
					]
				},
				{
					"type": "card_header",
					"label": {
						"zh_CN": "颜色设置",
						"en_US": "Color settings"
					}
				},
				{
					"type": "card_color",
					"id": "text_color",
					"label": {
						"zh_CN": "文字颜色",
						"en_US": "text color"
					},
					"default": "#232323"
				},
				{
					"type": "card_color",
					"id": "btn_color",
					"label": {
						"zh_CN": "按钮文字颜色",
						"en_US": "Button text color"
					},
					"default": "#ffffff"
				},
				{
					"type": "card_color",
					"id": "btn_bg",
					"label": {
						"zh_CN": "按钮背景颜色",
						"en_US": "Button background color"
					},
					"show-alpha": "false",
					"color-format": "rgb",
					"default": "rgba(35,35,35,1)"
				},
				{
					"type": "card_color",
					"id": "mask_color",
					"label": {
						"zh_CN": "蒙层颜色",
						"en_US": "mask color"
					},
					"show-alpha": "false",
					"color-format": "rgb",
					"default": "rgba(0,0,0,0)"
				}
			]
		}
	],
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "set up"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "开启动画",
				"en_US": "Turn on animation"
			},
			"default": true,
			"id": "open_anime"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "自动轮播",
				"en_US": "auto carousel"
			},
			"id": "is_play",
			"default": true
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "轮播时间(s)",
				"en_US": "Carousel time(s)"
			},
			"default": "3",
			"max": 5,
			"min": 1,
			"id": "duration"
		},
		{
			"type": "card_select",
			"label": {
				"zh_CN": "图片高度",
				"en_US": "image height"
			},
			"id": "height",
			"option": [
				{
					"label": {
						"zh_CN": "大",
						"en_US": "big"
					},
					"value": "big"
				},
				{
					"label": {
						"zh_CN": "中",
						"en_US": "middle"
					},
					"value": "middle"
				},
				{
					"label": {
						"zh_CN": "小",
						"en_US": "Small"
					},
					"value": "small"
				},
				{
					"label": {
						"zh_CN": "自适应",
						"en_US": "Adaptive"
					},
					"value": "auto"
				}
			],
			"default": "small"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "full width"
			},
			"id": "is_width_fill",
			"default": true
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "内容",
				"en_US": "content"
			}
		}
	],
	"default": {
		"settings": {
			"open_anime": true,
			"is_play": false,
			"duration": "3",
			"height": "middle",
			"is_width_fill": true
		},
		"blocks": [
			{
				"pc_image": {
					"src": "",
					"alt": ""
				},
				"mobile_image": {
					"src": "",
					"alt": ""
				},
				"title": "Slideshow",
				"detail": "Use this section to make a bold statement",
				"title_size": 40,
				"btn_text": "SHOP NOW",
				"link": {
					"type": "",
					"title": "",
					"url": ""
				},
				"position_algin": "center-center",
				"text_color": "#232323",
				"btn_color": "#ffffff",
				"btn_bg": "rgba(35,35,35,1)",
				"mask_color": "rgba(0,0,0,0)",
				"block_type": "slide-item"
			},
			{
				"pc_image": {
					"src": "",
					"alt": ""
				},
				"mobile_image": {
					"src": "",
					"alt": ""
				},
				"title": "Slideshow",
				"detail": "Use this section to make a bold statement",
				"title_size": 40,
				"btn_text": "SHOP NOW",
				"link": {
					"type": "",
					"title": "",
					"url": ""
				},
				"position_algin": "center-center",
				"text_color": "#232323",
				"btn_color": "#ffffff",
				"btn_bg": "rgba(35,35,35,1)",
				"mask_color": "rgba(0,0,0,0)",
				"block_type": "slide-item"
			}
		]
	},
	"icon": "icon-lunbotu"
}
{% endschema %}
